<template>
    <div class="common-layout">
        <el-container>
            <!-- 表单 -->
            <el-header>
                <div class="common-layout">
                    <el-container>
                        <el-aside width="650px">
                            <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="fromInlineRef">
                                <el-form-item style="width:500px;">
                                    <el-input v-model="formInline.order" placeholder="提现单号" />
                                </el-form-item>
                                <el-form-item>
                                    <el-input v-model="formInline.user" placeholder="提现账号" />
                                </el-form-item>
                                <el-form-item style="width:100px;">
                                    <el-select v-model="formInline.status" placeholder="审核中">
                                        <el-option label="已通过" value="1" />
                                        <el-option label="审核中" value="0" />
                                        <el-option label="已拒绝" value="2" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item style="margin-right: 0;">
                                    <el-col :span="17">
                                        <el-date-picker v-model="formInline.date" type="date" placeholder="Pick a date"
                                            style="width: 100%" />
                                    </el-col>

                                </el-form-item>
                                <el-form-item style="width:110px; margin-left: 5px;">
                                    <el-button type="primary" @click="reset">重置</el-button>
                                </el-form-item>
                                <el-form-item style="width:110px;">
                                    <el-button type="success" @click="select">查询</el-button>
                                </el-form-item>
                            </el-form>
                        </el-aside>
                        <el-main>
                            <div class="flex">
                                <el-button color="#626aef" :dark="isDark" plain @click="success()">全部同意</el-button>

                                <el-button color="#626aef" :dark="isDark" plain @click="deriveExcel()">
                                    <el-icon>
                                        <Download />
                                    </el-icon>
                                    导出
                                </el-button>
                            </div>
                        </el-main>
                    </el-container>
                </div>
            </el-header>
            <!-- 数据 -->
            <el-main>
                <div class="common-layout">
                    <el-container style="display: block;">
                        <el-table :data="tableData" style="width: 100%; text-align: start;" empty-text="暂无数据"
                            :header-cell-style="{ background: '#EFF0FD', color: '#606266' }" id="table">
                            <el-table-column fixed prop="id" label="ID"  show-overflow-tooltip />
                            <el-table-column prop="wid" label="提现单号"   show-overflow-tooltip />
                            <el-table-column prop="w_money" label="提现金额"  show-overflow-tooltip />
                            <el-table-column prop="charge" label="手续费"   show-overflow-tooltip />
                            <el-table-column prop="w_type" label="状态"   show-overflow-tooltip />
                            <el-table-column prop="wdate" label="日期"   show-overflow-tooltip />
                            <el-table-column fixed="right" label="操作"   show-overflow-tooltip>
                                <template #default="a">
                                    <el-button link type="primary" size="small" @click="handleClick(a.row)">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="bar">
                            <span>总计 <span class="number">{{ formInline.count }}</span> 条数据</span>
                            <el-pagination :page-size="formInline.pageSize"
                                v-model:current-page="formInline.currentPage" layout="prev, pager, next"
                                :total=formInline.count @current-change="select()" />
                        </div>
                    </el-container>

                </div>
            </el-main>


        </el-container>
    </div>


</template>

<script>
import * as XLSX from 'xlsx'
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus'
export default {
    name: 'VueWithdrawal',

    data() {
        return {
            formInline: {
                order: '',
                user: '',
                status: '',
                date: '',
                date2: '',
                currentPage: '1',
                pageSize: '3',
                count: 1
            },
            tableData: [],



        };
    },

    mounted() {

    },

    methods: {
        // 重置
        reset() {
            this.formInline = {
                order: '',
                user: '',
                status: '',
                date: '',
                date2: ''
            }
        },
        // 带条件查询
        select() {
            let that = this;
            this.$http.post('withdrawal/selectByCondition', that.formInline)
                .then(function (response) {
                    that.tableData = response.data.records;
                    that.formInline.count = response.data.count;
                    that.formInline.pageSize = response.data.pageSize

                    for (let i = 0; i < that.tableData.length; i++) {
                        if (that.tableData[i].w_type == 0) {
                            that.tableData[i].w_type = "审核中"
                        } else if (that.tableData[i].w_type == 1) {
                            that.tableData[i].w_type = "已通过"
                        } else if (that.tableData[i].w_type == 2) {
                            that.tableData[i].w_type = "已拒绝"
                        }
                    }

                })
                .catch(function (error) {
                    console.log(error);
                })

        },
        // 导出Excel
        deriveExcel() {
            let workbook = XLSX.utils.table_to_book(document.getElementById('table')); //需要在table上定义一个id
            try {
                XLSX.writeFile(workbook, '提现记录表.xlsx');
                ElMessage({
                    type: 'success',
                    message: '导出成功!'
                });
            } catch (e) {
                ElMessage.error('导出失败,失败信息:!')
            }
        },
        // 删除
        handleClick(index) {
            let that = this;
            ElMessageBox.confirm(
                '是否删除? （请谨慎考虑！）',
                'Warning',
                {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    }),
                        that.$http.get('withdrawal/delete?id=' + index.id)
                            .then(function (response) {
                                console.log(response);
                            })
                            .catch(function (error) {
                                console.log(error);
                            }),
                        that.select();



                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '删除失败',
                    })
                })







        },
        // 全部同意
        success() {
            let that = this;

            ElMessageBox.confirm(
                '全部同意? （请谨慎考虑！）',
                'Warning',
                {
                    confirmButtonText: '同意',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    ElMessage({
                        type: 'success',
                        message: '修改成功',
                    }),
                        that.$http.post('withdrawal/agreeall')
                            .then(function (response) {
                                console.log(response);
                                that.select();
                            })
                            .catch(function (error) {
                                console.log(error);
                            })




                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '修改失败',
                    })
                })



        }

    },
    mounted() {
        this.select();
    }
};
</script>

<style lang="css" scoped>
.el-main {
    padding: 0 !important;
}

.el-header {
    height: 140px;
    padding-left: 0;
}

.el-aside {
    overflow: hidden;
}

.el-form-item {
    margin-right: 10px;
}

.flex {
    margin-top: 20px;
}

/* 下方数据 */
.bottom-header {
    height: 100%;
    overflow-y: auto;
    width: 100%;

}

.el-table {
    margin-top: 20px;
    box-shadow: 0 0 5px rgb(195, 206, 217);
}

.bar {
    border-top: 1px solid silver;
    line-height: 23px;
}

.el-pagination {
    float: left;
    margin-top: 10px;
}

.bar>span {
    margin-top: 16px;
    display: inline-block;

}

.bar .number {
    color: red;
}
</style>